<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <script src="../js/jquery-1.7.2.js"></script>
    <script src="../js/pdf.js"></script>
    <script type="application/javascript">
        function yl() {
            if($("#div2").css("display") == 'none'){
                $("#div1").css("width","50%");
                $("#div2").show();
                str = "<iframe src='https://view.officeapps.live.com/op/view.aspx?src=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.pdf' width='100%' height='100%' frameborder='1'> </iframe>"
                $("#div2").html(str);
            }else {
                $("#div1").css("width","100%");
                $("#div2").hide();
            }

        }
    </script>
</head>
<div id="div1" style="width:100%;height: 1000px;background-color: aquamarine;float: left">
    <input type="button" onclick="yl()" value="预览">
</div>
<div id = "div2" style="width: 50%;height: 1000px;float: right;display: none">
</div>
<!--<div id = "div2" style="width: 100%;height: 500px;display: none">-->
<!--</div>-->
<!--<div id="div1" style="width:100%;height: 1000px;background-color: aquamarine;">-->
<!--    <input type="button" onclick="yl()" value="预览">-->
<!--</div>-->


<body>



</body>
</html>